<template>
	<div>
		<a-card :borderd="false" class="mb-2">
			<a-row :gutter="8">
				<a-col :span="2">
					<a-select v-model:value="config.listQuery.userId" placeholder="请选择用户" style="width: 100%;"
							  allowClear
							  filterable>
						<a-select-option v-for="item in config.userList" :key="item.id" :value="item.id">{{ item.name }}
						</a-select-option>
					</a-select>
				</a-col>
				<a-col :span="2">
					<a-select v-model:value="config.listQuery.isOnline" style="width: 100%" placeholder="请选择在线状态"
							  allowClear>
						<a-select-option v-for="item in config.selectObj.onlineOptions" :key="item.value"
										 :label="item.label"
										 :value="item.value">{{ item.label }}
						</a-select-option>
					</a-select>
				</a-col>
				<a-col :span="2">
					<a-select v-model:value="config.listQuery.enable" style="width: 100%" placeholder="请选择启用状态"
							  allowClear>
						<a-select-option v-for="item in config.selectObj.statusOptions" :key="item.value"
										 :label="item.label"
										 :value="item.value">{{ item.label }}
						</a-select-option>
					</a-select>
				</a-col>
				<a-col :span="12">
					<a-space>
						<a-button @click="tableRef.refresh()">搜索</a-button>
						<a-button @click="handleCreate" type="primary">新增
						</a-button>
					</a-space>
				</a-col>
			</a-row>
		</a-card>

		<a-card>
			<h-table :paged="true" ref="tableRef" :data="getList" :columns="columns">
			</h-table>

		</a-card>


		<a-modal v-model:open="config.dialogFormVisible" :destroyOnClose="true" :width="1000" :closable="false"
				 @cancel="config.dialogFormVisible = false" @ok="saveData">
			<a-form :rules="config.rules" ref="dataForm" :model="config.temp">
				<a-form-item label="用户" name="userId">
					<a-select style="width: 280px" v-model:value="config.temp.userId" placeholder="请选择"
							  :disabled="config.dialogStatus=='update'">
						<a-select-option v-for="item in  config.userList" :key="item.id" :value="item.id">
							{{ item.name }}
						</a-select-option>
					</a-select>
				</a-form-item>
				<a-form-item label="License名称" name="name">
					<a-input v-model:value="config.temp.name"></a-input>
				</a-form-item>
				<a-form-item label="上传限速" name="upLimitRate">
					<a-input v-model:value="config.temp.upLimitRate" placeholder="如：10240B、500K、1M"></a-input>
				</a-form-item>
				<a-form-item label="下载限速" name="downLimitRate">
					<a-input v-model:value="config.temp.downLimitRate" placeholder="如：10240B、500K、1M"></a-input>
				</a-form-item>
			</a-form>

		</a-modal>

		<a-modal v-model:open="config.dialogPvVisible" :destroyOnClose="true" :width="1000" :closable="false"
				 @cancel="config.dialogPvVisible = false" @ok="config.dialogPvVisible = false">
			<el-table :data="config.pvData" border fit highlight-current-row style="width: 100%">
				<el-table-column prop="key" label="Channel"></el-table-column>
				<el-table-column prop="pv" label="Pv"></el-table-column>
			</el-table>
		</a-modal>
	</div>
</template>

<script setup>
import licenseApi from '@/api/license/licenseApi'
import userApi from '@/api/sys/userApi'
import tool from '@/utils/tool'
import {message} from 'ant-design-vue'

const config = ref({
	tableKey: 0,
	list: null,
	total: null,
	listLoading: true,
	listQuery: {
		enable: undefined,
		isOnline: undefined,
		userId: null
	},
	importanceOptions: [1, 2, 3],
	userList: [],
	showReviewer: false,
	temp: {
		id: undefined,
		importance: 1,
		remark: '',
		timestamp: new Date(),
		title: '',
		type: '',
		status: 'published'
	},
	dialogFormVisible: false,
	dialogStatus: '',
	textMap: {
		update: '编辑',
		create: '新建'
	},
	dialogPvVisible: false,
	pvData: [],
	rules: {
		userId: [{required: true, message: '请选择用户', trigger: 'blur'}],
		name: [{required: true, message: 'License名称不能为空', trigger: 'blur'}]
	},
	downloadLoading: false,
	selectObj: {
		statusOptions: [{label: '启用', value: 1}, {label: '禁用', value: 2}],
		onlineOptions: [{label: '在线', value: 1}, {label: '离线', value: 2}]
	}
})
const columns = ref([
	{
		title: 'id',
		key: 'id',
		dataIndex: 'id',
		ellipsis: true,
	},
	{
		title: '用户名',
		key: 'userName',
		dataIndex: 'userName',
		ellipsis: true,
	},
	{
		title: 'licenseName',
		key: 'name',
		dataIndex: 'name',
		ellipsis: true,
	},
	{
		title: 'licenseKey',
		key: 'licenseKey',
		dataIndex: 'licenseKey',
		ellipsis: true,
	},
	{
		title: '限速',
		key: 'upLimitRate',
		dataIndex: 'upLimitRate',
		ellipsis: true,
	},
	{
		title: '创建时间',
		key: 'createTime',
		dataIndex: 'createTime',
		ellipsis: true,
	},
	{
		title: '修改时间',
		key: 'updateTime',
		dataIndex: 'updateTime',
		ellipsis: true,
	},
	{
		title: '启停状态',
		key: 'enable',
		dataIndex: 'enable',
		ellipsis: true,
		mapping: [
			{
				key: '1',
				value: '启用'
			},
			{
				key: '2',
				value: '停用'
			}
		]
	},
	{
		title: '上线状态',
		key: 'isOnline',
		dataIndex: 'isOnline',
		ellipsis: true,
		mapping: [
			{
				key: '1',
				value: '在线'
			},
			{
				key: '2',
				value: '离线'
			}
		]
	},
	{
		title: '操作',
		dataIndex: 'action',
		key: 'action',
		width: 260,
		fixed: 'right',
		buttonList: [
			{
				type: "primary",
				click: (field, record) => {
					handleUpdate(record)
				},
				render: (record) => {
					return "编辑";
				}
			},
			{

				click: (field, record) => {
					handleReset(record)
				},
				render: (record) => {

					return "重置";
				}
			},
			{
				click: (field, record) => {
					handleModifyStatus(record, record.enable == 1 ? 2 : 1);
				},
				render: (record) => {
					return record.enable == 1 ? "停用" : "启用";
				}
			},

			{
				click: (field, record) => {
					handleDelete(record)
				},
				render: (record) => {
					return "删除";
				}
			}
		]
	}
])
const tableRef = ref();
const dataForm = ref()
onMounted(() => {
	getDataList();
})
const getDataList = async () => {
	const loginName = tool.data.get('USER_INFO').account;// this.$store.state.user.loginName
	let response = await userApi.userSelector();

	config.value.userList = response.records
	const curUser = config.value.userList.find((val) => val.account === loginName)
	if (curUser) {
		config.value.listQuery.userId = curUser.id
	}
}

const getList = async (data) => {
	let response = await licenseApi.fetchList({
		...data,
		...config.value.listQuery
	});
	return response;
}


const handleModifyStatus = async (row, enable) => {
	await licenseApi.updateEnableStatus(row.id, enable);
	// message.info('操作成功')
	tableRef.value.refresh()
}
const resetTemp = () => {
	config.value.temp = {
		id: undefined,
		name: undefined,
		userId: undefined
	}
}
const handleCreate = () => {
	resetTemp()
	config.value.dialogStatus = 'create'
	config.value.dialogFormVisible = true
}
const saveData = async () => {
	let b = await dataForm.value.validate();
	if (!b) {
		return
	}
	if (config.value.dialogStatus == 'create') {
		await createData();
	} else {
		await updateData();
	}

}
const createData = async () => {
	await licenseApi.createLicense(config.value.temp);
	config.value.dialogFormVisible = false
	message.info('创建成功')
	tableRef.value.refresh()
}
const handleUpdate = (row) => {
	config.value.temp = Object.assign({}, row) // copy obj
	config.value.dialogStatus = 'update'
	config.value.dialogFormVisible = true
}
const handleReset = async (row) => {
	await licenseApi.resetLicense(row.id);
	// message.info('重置成功')
	tableRef.value.refresh();
}

const updateData = async () => {
	const tempData = Object.assign({}, config.value.temp)
	await licenseApi.updateLicense(tempData);
	// message.info('更新成功')
	config.value.dialogFormVisible = false
	tableRef.value.refresh()
}
const handleDelete = async (row) => {
	await licenseApi.deleteLicense(row.id);
	// message.info('删除成功')
	tableRef.value.refresh()
}
</script>
